<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/house.css" rel="stylesheet" />
	</head>

	<body>


		<div id="app">



			<header v-show="showAll" class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">西瓜买房</h1>
			</header>

			<header v-show="showMy" class="mui-bar mui-bar-nav">
				<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
				<h1 class="mui-title">房产总值</h1>
			</header>


			<div class="mui-content">

				<ul v-show="showAll" class="mui-table-view">
					<li @click="buyHouse(item.id)" v-for="item in houseList" class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" :src="item.pic">
							<div class="mui-media-body">
								{{item.title}}
								<br />
								<p style="color: red;">总价:{{item.price}}</p>
								<p>面积:{{item.size}}平方米</p>
								<p class="mui-ellipsis">{{item.detail}}</p>
							</div>
						</a>
					</li>
				</ul>

				<ul v-show="showMy" class="mui-table-view">
					<li v-for="item in myHouseList" class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" :src="item.pic">
							<div class="mui-media-body">
								{{item.xiaoqu.name}}
								<p style="display: inline;">{{item.xiaoqu.addr | convertBuildingFormat}}</p>
								<p style="color: red;">总价:{{item.price}}</p>
								<p>面积:{{item.size}}平方米</p>
								<p>车位:{{item.carPlace}}个</p>
							</div>
						</a>
					</li>
				</ul>



			</div>

			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item2" @click="showHouseList()">
					<span class="mui-tab-label">房产列表</span>
				</a>
				<a class="mui-tab-item2" @click="showMyHouseList()">
					<span class="mui-tab-label">我的房产({{myHouseList.length}})</span>
				</a>
			</nav>


		</div>













		<script src="js/util.js"></script>
		<script src="js/db.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/vue-min.js"></script>
		<script type="text/javascript">
			mui.init()


			var app = new Vue({
				el: '#app',
				data: {
					userInfo: {
						niumaLevel: 1,
						name: '狗蛋',
						age: 0,
						IQ: 10,
						luck: 100,
						// money: 0,
						energyMax: 100,
						energyNow: 100,
						parentMoney: 100000,
						health: 100,
						hunger: 50,
						clean: 50,
						happy: 50,
						days: 1,
						healthLogs: [],
						bitCoinCount: 0,
						bitCoinTradeLog: [],
						bitCoinBuyAvg: 0,
						bitCoinProfit: 0,
						changeArr: [986.07, 29.67, 1899.80, 845.65, 301.77, 940.28, 213.06, 1824.48, 1913.19, 1000.02,
							1401.34, 1847.38,
							986.07, 29.67, 1899.80, 845.65, 301.77, 940.28, 63.72, 1877.40,
							1115.50, 657.85, 1279.25, 80.96, 1381.79, 907.53, 1459.61, 1200.13
						],
						todayWorkCount: 0,
						appearance: 0,
						clothingList: [],
						reputation: 0,
						houseList: [],
						baomuCareDay:0
					},
					houseList: [{
						id: 1,
						xiaoqu: {
							name: '红旗小区',
							addr: '3-1-1601',
							xiaoquLevel: 1
						},
						title: '温馨实惠3居室，近市中心交通便利',
						detail: '本单元位于市中心边缘，交通便利，近地铁站和多条公交线路，非常适合上班族和学生。内部装修简约而温馨，提供基本家具，包括一张双人床、衣柜、书桌和椅子。配有现代化的厨房，包括冰箱和微波炉，以及必要的炊具和餐具，让你可以随时烹饪美味佳肴。浴室经过精心设计，配有全新的卫浴设施和持续热水供应，确保你的居住舒适。',
						price: 200000,
						size: 90,
						pic: 'pic/house-pic-1.png',
						carPlace: 0
					}, {
						id: 2,
						xiaoqu: {
							name: '保利公园九里',
							addr: '18-2-1903',
							xiaoquLevel: 2
						},
						title: '低奢风格4居室，黄金地段景观优美',
						detail: '市中心的现代风格两居室公寓，拥有绝佳的城市景观和便捷的生活设施，公寓特色宽敞的客厅，配备豪华沙发和高清电视，是放松和娱乐的理想场所。大型窗户确保自然光充足，让整个空间明亮通透。',
						price: 1000000,
						size: 120,
						pic: 'pic/house-pic-2.png',
						carPlace: 1
					}, {
						id: 3,
						xiaoqu: {
							name: '香格里拉',
							addr: '1-1-1',
							xiaoquLevel: 3
						},
						title: '豪华私人别墅，私人花园壮观湖景',
						detail: '坐拥无与伦比的湖景和私密的生活环境。这座别墅是追求卓越生活品质的家庭或度假者的理想之选。别墅拥有四间卧室和五间浴室，整体设计典雅而现代，内部装潢采用高品质材料，确保每个细节都完美无瑕。',
						price: 3000000,
						size: 200,
						pic: 'pic/house-pic-3.png',
						carPlace: 3
					}, {
						id: 4,
						xiaoqu: {
							name: '堂山春晓',
							addr: '1-1-1',
							xiaoquLevel: 4
						},
						title: '宏伟顶级别墅，城市全景极致奢华',
						detail: '坐落于城市最高点的顶级别墅，这里不仅提供无敌的城市全景，还带给您极致的私密性和奢华体验。此别墅是追求独一无二生活品质的人士的完美选择。超过1000平方米的生活空间，共有六间宽敞的卧室和八间精装修的浴室，每一处都细致考量使用者的舒适与便利。',
						price: 10000000,
						size: 500,
						pic: 'pic/house-pic-4.png',
						carPlace: 10
					}, {
						id: 5,
						xiaoqu: {
							name: '西郊庄园',
							addr: '1-1-1',
							xiaoquLevel: 5
						},
						title: '上海私人皇宫，富丽堂皇顶级格局',
						detail: '设计独特、价值1亿的奢华别墅，它位于城市中最尊贵的住宅区之一，提供绝对的隐私和安全。这座别墅拥有精致的建筑风格和无与伦比的装修质量，是真正的生活艺术品。总建筑面积超过2000平方米，这座豪宅拥有十间卧室和十二间豪华浴室，每一处空间都显示出无与伦比的品味和精细的手工艺。',
						price: 100000000,
						size: 2000,
						pic: 'pic/house-pic-5.png',
						carPlace: 100
					}],
					showAll: true,
					showMy: false,
					myHouseList: []
				},
				methods: {
					showHouseList() {
						this.showAll = true
						this.showMy = false
					},
					showMyHouseList() {
						this.showAll = false
						this.showMy = true
					},
					buyHouse(id) {


						let house = null

						for (var i = 0; i < this.houseList.length; i++) {
							if (this.houseList[i].id == id) {
								house = this.houseList[i]
							}
						}

						if (house.price > this.userInfo.parentMoney) {
							mui.toast('余额不足 无法购买')
							return
						}

						let str = '<img style="width:100%" src="' + house.pic + '" />' + '</br>' + house.xiaoqu.name +
							'</br>' + house.xiaoqu.addr + '</br>' + '价格:' + house.price +
							' 元</br>' + '面积:' + house.size + ' 平方米' +
							'</br>' + '车位:' + house.carPlace + '个'
						let that = this
						mui.confirm(str, '房产信息', ['购买', '取消'], function(e) {
							if (e.index == 0) {
								// 			let point = house.appearancePoint

								// 			let oldMaxPoint = 0
								// 			for (var i = 0; i < that.userInfo.clothingList.length; i++) {
								// 				if (that.userInfo.clothingList[i].type == clothing.type && that.userInfo
								// 					.clothingList[i].appearancePoint > oldMaxPoint) {
								// 					oldMaxPoint = that.userInfo.clothingList[i].appearancePoint
								// 				}
								// 			}
								// 			for (var i = 0; i < that.userInfo.clothingList.length; i++) {
								// 				if (that.userInfo.clothingList[i].type == clothing.type && that.userInfo
								// 					.clothingList[i].id == clothing.id) {
								// 					point = 0
								// 				}

								// 			}
								// 			if (point > oldMaxPoint) {
								// 				that.userInfo.appearance -= oldMaxPoint
								// 			} else {
								// 				point = 0
								// 			}
								
								let a = Math.floor(Math.random() * 20) + 1;
								let b = Math.floor(Math.random() * 2) + 1;
								let c = Math.floor(Math.random() * 1000) + 1;
								if(house.title.indexOf('别墅')>-1||house.title.indexOf('皇宫')>-1||house.size>=500){
									a = Math.floor(Math.random() * 10) + 1;
									b = Math.floor(Math.random() * 10) + 1;
									c = '00' + Math.floor(Math.random() * 9) + 1
								}else if(house.title.indexOf('别墅')>-1||house.title.indexOf('皇宫')>-1||house.size>=1000){
									a = Math.floor(Math.random() * 5) + 1;
									b = Math.floor(Math.random() * 5) + 1;
									c = '00' + Math.floor(Math.random() * 3) + 1
								}else if(house.title.indexOf('别墅')>-1||house.title.indexOf('皇宫')>-1||house.size>=2000){
									a = Math.floor(Math.random() * 3) + 1;
									b = Math.floor(Math.random() * 3) + 1;
									c = '00' + Math.floor(Math.random() * 2) + 1
								}else if(house.title.indexOf('别墅')>-1||house.title.indexOf('皇宫')>-1||house.size>=3000){
									a = Math.floor(Math.random() * 2) + 1;
									b = Math.floor(Math.random() * 2) + 1;
									c = '001'
								}
								
								house.xiaoqu.addr = `${a}-${b}-${c}`
								
								

								that.myHouseList.push(house)
								that.userInfo.houseList = that.myHouseList

								// that.userInfo.appearance += point

								that.userInfo.parentMoney -= house.price
								Database.saveData('userInfo', JSON.stringify(that.userInfo))
								mui.toast('购买成功')
							} else {

							}

						}, 'div')
					},
				},
				filters: {
					convertBuildingFormat(input) {
						// 将输入的字符串按照 '-' 分割成数组
						const parts = input.split('-');
						// 检查分割后的数组长度，确保格式正确
						if (parts.length !== 3) {
							return '输入格式错误，请输入格式为 "x-y-z" 的字符串';
						}
						// 使用数组的每一部分构造新的格式化字符串
						return `${parts[0]}栋${parts[1]}单元${parts[2]}`;
					}
				},
				mounted() {
					let userInfo = JSON.parse(Database.getData('userInfo'))
					if (userInfo == null) {
						document.location.href = 'birth.html'
					} else {
						this.userInfo = userInfo
						this.myHouseList = this.userInfo.houseList
					}
				}
			})
		</script>
	</body>

</html>